<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桌面小说阅读器 - 设置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .card h2 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 1.5em;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: transform 0.2s;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #6c757d;
        }

        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .novel-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #e1e5e9;
            border-radius: 6px;
            padding: 10px;
        }

        .novel-item {
            padding: 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.2s;
        }

        .novel-item:hover {
            background: #f8f9fa;
        }

        .novel-item.active {
            background: #e3f2fd;
            border-left: 4px solid #667eea;
        }

        .novel-item:last-child {
            border-bottom: none;
        }

        .status {
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .shortcuts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .shortcut-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #667eea;
        }

        .shortcut-key {
            font-weight: bold;
            color: #667eea;
        }

        .shortcut-desc {
            color: #666;
            font-size: 0.9em;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📚 桌面小说阅读器</h1>
            <p>上班摸鱼神器 - 让阅读更轻松</p>
        </div>

        <div class="card">
            <h2>🎯 快速开始</h2>
            <div class="status success">
                ✅ 悬浮窗已启动，正在桌面显示小说内容
            </div>
            <p>悬浮窗功能说明：</p>
            <ul style="margin-left: 20px; margin-top: 10px;">
                <li>悬浮窗会始终置顶显示在桌面上</li>
                <li>支持自动滚动阅读，解放双手</li>
                <li>可调节字体大小、滚动速度和透明度</li>
                <li>支持暂停/继续功能</li>
                <li>右键托盘图标可控制显示/隐藏</li>
            </ul>
        </div>

        <div class="card">
            <h2>⚙️ 悬浮窗设置</h2>
            <div class="form-group">
                <label>窗口宽度 (像素)</label>
                <input type="number" id="windowWidth" value="400" min="200" max="800">
            </div>
            <div class="form-group">
                <label>窗口高度 (像素)</label>
                <input type="number" id="windowHeight" value="300" min="150" max="600">
            </div>
            <div class="form-group">
                <label>窗口位置 X (像素)</label>
                <input type="number" id="windowX" value="100" min="0">
            </div>
            <div class="form-group">
                <label>窗口位置 Y (像素)</label>
                <input type="number" id="windowY" value="100" min="0">
            </div>
            <div class="btn-group">
                <button class="btn" onclick="applyWindowSettings()">应用设置</button>
                <button class="btn btn-secondary" onclick="resetWindowSettings()">重置默认</button>
            </div>
        </div>

        <div class="card">
            <h2>📖 小说管理</h2>
            
            <!-- 小说列表 -->
            <div class="form-group">
                <label>已保存的小说</label>
                <div class="novel-list" id="novelList">
                    <div class="novel-item" style="text-align: center; color: #999; padding: 20px;">
                        暂无保存的小说
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label>小说标题</label>
                <input type="text" id="novelTitle" placeholder="输入小说标题">
            </div>
            <div class="form-group">
                <label>小说内容</label>
                <textarea id="novelContent" placeholder="输入或粘贴小说内容..."></textarea>
            </div>
            
            <!-- 章节定位功能 -->
            <div class="form-group" id="chapterSection" style="display: none;">
                <label>章节定位</label>
                <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                    <input type="text" id="chapterSearch" placeholder="搜索章节名称..." style="flex: 1;">
                    <button class="btn" onclick="searchChapter()">搜索章节</button>
                </div>
                <div id="chapterList" style="max-height: 200px; overflow-y: auto; border: 1px solid #e1e5e9; border-radius: 6px; padding: 10px; background: #f8f9fa;">
                    <div style="text-align: center; color: #999;">点击搜索章节按钮开始搜索</div>
                </div>
            </div>
            <div class="btn-group">
                <button class="btn" onclick="saveNovel()">保存小说</button>
                <button class="btn btn-secondary" onclick="loadNovel()">加载小说</button>
                <button class="btn btn-secondary" onclick="clearNovel()">清空内容</button>
                <button class="btn btn-secondary" onclick="deleteNovel()">删除小说</button>
            </div>
            
            <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e1e5e9;">
                <h3 style="color: #667eea; margin-bottom: 15px;">📁 导入TXT文件</h3>
                <div class="form-group">
                    <label>选择TXT文件</label>
                    <div style="display: flex; gap: 10px; align-items: center;">
                        <input type="file" id="txtFileInput" accept=".txt" style="padding: 8px; flex: 1;">
                        <button class="btn" onclick="browseTxtFile()" style="white-space: nowrap;">浏览文件</button>
                    </div>
                    <div id="fileInfo" style="margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 6px; display: none;">
                        <div style="font-weight: bold; color: #667eea;">已选择文件:</div>
                        <div id="fileName" style="margin-top: 5px;"></div>
                        <div id="fileSize" style="font-size: 0.9em; color: #666; margin-top: 3px;"></div>
                    </div>
                    <div id="dropZone" style="margin-top: 15px; padding: 20px; border: 2px dashed #ddd; border-radius: 6px; text-align: center; color: #666; transition: all 0.3s;">
                        <div>📁 拖拽TXT文件到这里，或点击上方按钮选择文件</div>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn" onclick="importTxtFile()">导入TXT文件</button>
                    <button class="btn btn-secondary" onclick="clearFileInput()">清空选择</button>
                    <button class="btn" onclick="importJianLai()" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);">导入《剑来》</button>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>⌨️ 快捷键说明</h2>
            <div class="shortcuts">
                <div class="shortcut-item">
                    <div class="shortcut-key">空格键</div>
                    <div class="shortcut-desc">暂停/继续滚动</div>
                </div>
                <div class="shortcut-item">
                    <div class="shortcut-key">Ctrl + S</div>
                    <div class="shortcut-desc">打开/关闭设置面板</div>
                </div>
                <div class="shortcut-item">
                    <div class="shortcut-key">Ctrl + H</div>
                    <div class="shortcut-desc">显示/隐藏操作栏</div>
                </div>
                <div class="shortcut-item">
                    <div class="shortcut-key">Ctrl + 滚轮</div>
                    <div class="shortcut-desc">调节滚动速度</div>
                </div>
                <div class="shortcut-item">
                    <div class="shortcut-key">ESC</div>
                    <div class="shortcut-desc">关闭设置面板</div>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>💡 使用技巧</h2>
            <ul style="margin-left: 20px;">
                <li>将悬浮窗放在屏幕边缘，减少对工作的干扰</li>
                <li>鼠标悬停时显示操作栏，移开后自动隐藏</li>
                <li>右键点击切换背景色（透明/深色）</li>
                <li>使用暂停功能在重要时刻暂停阅读</li>
                <li>通过托盘图标快速控制悬浮窗显示</li>
                <li>支持拖拽移动悬浮窗位置</li>
                <li>使用 Ctrl + H 快捷键快速显示/隐藏操作栏</li>
                <li>点击设置按钮后，点击其他地方自动关闭设置面板</li>
                <li>支持拖拽TXT文件直接导入，更方便快捷</li>
                <li>小说列表按保存时间排序，最新保存的在最前面</li>
                <li>支持多本小说管理，点击列表即可切换</li>
                <li>文件大小限制50MB，确保性能稳定</li>
            </ul>
        </div>
    </div>

    <script src="./main.js"></script>
</body>
</html>